<template>
	<view class="user-info-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" title="个人资料"></CustomNav>
		<view class="tips-block block" :style="'margin-top:'+mt">
			<view class="iconfont icon-tishi"></view>请保证信息内容的真实性和完整性
		</view>
		<view class="form-block block">
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>学历</view>
				<NormalPicker @selected="bindPicker($event,'education')" :range="education" name="name" :value="form.education" class="form-ctrl"></NormalPicker>
				<view class="iconfont icon-arrow-right"></view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="no-require">*</text>经验</view>
				<NormalPicker @selected="bindPicker($event,'experience')" :range="experience" name="name" :value="form.experience" class="form-ctrl"></NormalPicker>
				<view class="iconfont icon-arrow-right"></view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>意向工种</view>
				<MultipleColPicker class="form-ctrl" :range="intention" :value="form.intention" @selected="bindIntention"></MultipleColPicker>
				<view class="iconfont icon-arrow-right"></view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>空闲时间</view>
				<NormalPicker @selected="bindPicker($event,'free')" :range="free" name="name" :value="form.free" class="form-ctrl"></NormalPicker>
				<view class="iconfont icon-arrow-right"></view>
			</view>
			<view class="form-item upload">
				<view class="form-label"><text class="no-require">*</text>技能证书</view>
				<view class="upload-block">
					<view @click="viewImage(item)" class="item" v-for="(item,index) in form.skill_certificate" :key="index">
						<image class="photo" :src="item" mode="aspectFill"></image>
						<view @click.stop="deleteImage(index)" class="iconfont delete icon-empty"></view>
					</view>
					<view @click="chooseImage" v-if="form.skill_certificate.length<6" class="upload-btn item"></view>
				</view>
			</view>
		</view>
		<view class="form-block block">
			<view class="title">个人评价</view>
			<view class="comments-block" v-if="comments.length>0">
				<view class="comments-item" v-for="item in comments" :key="item.id">
					<view class="user-block">
						<image class="user-photo" :src="item.user.logo" mode="aspectFill"></image>
						<view class="user-name">{{item.user.name}}</view>
					</view>
					<view class="comments-content">{{item.comments}}</view>
				</view>
			</view>
			<view v-else class="empty" style="padding-bottom: 20rpx;">暂无评价</view>
			<view v-if="comments.length>0" class="empty" style="padding-bottom: 20rpx;">只显示最近一百条数据</view>
		</view>
		<view class="btn normal" @click="submit">保存</view>
	</view>
</template>

<script>
	import {getCategoryMultiple,getWorkType} from '@/api/conf.js';
	import {getUserInfo,saveUserInfo,myComments} from '@/api/user.js';
	import MultipleColPicker from '@/components/Picker/MultipleColPicker'
	import NormalPicker from '@/components/Picker/NormalPicker'
	import { uploadFile } from '@/api/file';
	import {validate} from '@/util/validate.js';
	export default {
		components:{MultipleColPicker,NormalPicker},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				form:{
					education:0,
					experience:0,
					free:0,
					intention:0,
					skill_certificate:[],
				},
				rule:{
					education:{
						name:'学历',
						required:true
					},
					experience:{
						name:'经验',
						required:true
					},
					free:{
						name:'意向工种',
						required:true
					},
					intention:{
						name:'空闲时间',
						required:true
					},
				},
				
				education:[],
				experience:[],
				free:[],
				intention:[],
				
				comments:[],
			}
		},
		methods:{
			deleteImage(index){
				uni.showModal({
					title:'提示',
					content:'确定删除吗',
					success: (e) => {
						if(e.confirm){
							this.form.skill_certificate.splice(index,1);
						}
					}
				})
			},
			viewImage(url){
				uni.previewImage({
					current:url,
					urls:this.form.skill_certificate
				})
			},
			submit(){
				if(validate(this.form,this.rule)){
					let form=JSON.parse(JSON.stringify(this.form));
					form.skill_certificate=form.skill_certificate.join(',');
					uni.showLoading({
						title:'保存中',
						mask:true,
					})
					saveUserInfo(form).then(()=>{
						this.showToast('保存成功',()=>{
							this.back()
						});
					})
				}
			},
			chooseImage(){
				uni.chooseMedia({
					count:6-this.form.skill_certificate.length,
					mediaType:['image'],
					sizeType:['compressed'],
					success:async (res)=>{
						for (let item of res.tempFiles) {
							let url=await uploadFile(item.tempFilePath)
							this.form.skill_certificate.push(url)
						}
					}
				})
			},
			bindIntention(id){
				this.form.intention=id;
			},
			bindPicker(id,name){
				this.form[name]=id;
			},
			async getConf(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				const dictionaries={'学历':'education','经验':'experience','空闲时间':'free'}
				await getCategoryMultiple({name:dictionaries}).then(res=>{
					Object.values(dictionaries).forEach(item=>{
						this[item]=res[item]
					})
				})
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				await getWorkType().then(res=>{
					this.intention=res;
				})
			},
			getDetail(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getUserInfo().then(res=>{
					this.form.education=res.education||this.education[0].id;
					this.form.experience=res.experience||this.experience[0].id;
					this.form.free=res.free||this.free[0].id;
					this.form.intention=res.intention||this.intention[0]['child'][0].id;
					this.form.skill_certificate=res.skill_certificate?res.skill_certificate.split(','):[];
					this.getComments()
				})
			},
			getComments(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				myComments({page:1,limit:100}).then((res)=>{
					this.comments=res.list||[]
				})
			}
		},
		async onLoad() {
			await this.getConf();
			this.getDetail();
		}
	}
</script>

<style lang="scss" scoped>
	.user-info-page {
		overflow: hidden;
		padding-bottom: 150rpx;

		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}

		.block {
			width: $content-width;
		}
		
		.tips-block{
			margin: 0 auto;
			height: 120rpx;
			border-radius: 14px;
			background:#fff0d6;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			color: #e59f19;
			font-size: 30rpx;
			.iconfont{
				margin-right: 10rpx;
				font-size: 44rpx;
			}
		}
		.form-block{
			margin: 30rpx auto;
			padding: 0 30rpx;
			background: #fff;
			border-radius: 14px;
			.title{
				height: 70rpx;
				width: 100%;
				display: flex;
				align-items: center;
			}
			.comments-block{
				.comments-item{
					width: 100%;
					.user-block{
						width: 100%;
						height: 120rpx;
						display: flex;
						align-items: center;
						.user-photo{
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}
						.user-name{
							font-size: 28rpx;
							width: calc(100%  - 90rpx);
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
						}
					}
					.comments-content{
						width: 100%;
						line-height: 1.2;
					}
				}
			}
			
			.form-item{
				width: 100%;
				height: 140rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #efefef;
				.form-label{
					width: 180rpx;
					.require{
						color: red;
					}
					.no-require{
						color: #fff;
					}
				}
				.form-ctrl{
					width: calc(100% - 250rpx);
					height: 100%;
					display: flex;
					align-items: center;
				}
				.iconfont{
					width: 40rpx;
					display: flex;
					justify-content: center;
					color: #999;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}
			.form-item:last-child{
				border:none;
			}
			.form-item.upload{
				height: auto;
				min-height: 100rpx;
				flex-wrap: wrap;
				align-items: flex-start;
				.form-label{
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 30rpx;
				}
				.upload-block{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					margin-top: 30rpx;
					.upload-btn{
						background:#f5f6f8 url('@/static/image/upload.png') no-repeat center;
						background-size: auto 50%;
						
					}
					.item{
						border-radius: 12rpx;
						width: calc(50% - 10rpx);
						margin-right: 20rpx;
						height: 200rpx;
						margin-bottom: 20rpx;
						position: relative;
						.photo{
							border-radius: 12rpx;
							width: 100%;
							height: 100%;
						}
						.iconfont{
							position: absolute;
							right: 5px;
							top: 5px;
							color: #fff;
							font-size: 40rpx;
							text-shadow: 0 0 1px #000;
						}
					}
					.item:nth-child(2n){
						margin-right: 0;
					}
				}
			}
		}
		.btn{
			position: fixed;
			transform: translate(-50%,-50%);
			left: 50%;
			bottom: 0;
		}
	}
</style>